<template>
  <div class="banner">
    <el-carousel height="400px" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img v-if="!!item.url" :src="item.url" alt="" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { getBannerList } from "@/api/home";
export default {
  name: "banner",
  data() {
    return {
      listData: {
        page: 1,
        size: 10,
      },
      bannerList: [],
    };
  },
  mounted() {
    this.getBannerList();
  },
  methods: {
    getBannerList() {
      getBannerList(this.listData).then((response) => {
        if (response.data.code === 20000) {
          const { list } = response.data.results;
          this.bannerList = list ? list : [];
        }
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.banner {
  width: 1280px;
  margin: 0 auto;
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: grey;
  }
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #bbbbbb;
  }
  .el-carousel__arrow {
    background-color: transparent;
    font-size: 36px;
  }
  .el-carousel__indicators--horizontal {
    display: none;
  }
}
</style>
